<!-- <template>
  <div style="width:100%;">
    <div v-if="controllerShow" id="controller">
      <v-btn @click="play" :loading="playLoading">播放</v-btn>
    </div>
    <div id="paper">歌谱加载中...</div>
  </div>
</template>
<script>
import abcjs from 'abcjs';
import axios from 'axios';
import 'abcjs/abcjs-audio.css';

export default {
  name: 'AbcGePu',
  data() {
    return {
      visualObj: null,
      synth: null,
      controllerShow: false,
      playLoading: false,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    async init() {
      const res = await axios.get('./abc.txt');
      this.visualObj = abcjs.renderAbc('paper', res.data, { responsive: 'resize', jazzchords: true });

      this.controllerShow = true;
      // const synthController = new abcjs.synth.SynthController();

      // const CursorControl = function () {
      //   this.beatSubdivisions = 2;
      //   this.onStart = function () {
      //     console.log('The tune has started playing.');
      //   };
      //   this.onFinished = function () {
      //     console.log('The tune has stopped playing.');
      //   };
      //   this.onBeat = function (beatNumber) {
      //     console.log(`Beat ${beatNumber} is happening.`);
      //   };
      //   this.onEvent = function (event) {
      //     console.log('An event is happening', event);
      //   };
      // };
      // const cursorControl = new CursorControl();

      // synthController.load('#controller', cursorControl, {
      //   displayLoop: true,
      //   displayRestart: true,
      //   displayPlay: true,
      //   displayProgress: true,
      //   displayWarp: true,

      // });

      // await synthController.setTune(this.visualObj[0], false, { chordsOff: true });
    },
    async play() {
      this.playLoading = true;
      const myContext = new AudioContext();
      if (this.synth == null) {
        this.synth = new abcjs.synth.CreateSynth();
        await this.synth.init({
          audioContext: myContext,
          visualObj: this.visualObj[0],
          // millisecondsPerMeasure: 500,
        });
        await this.synth.prime();
      }

      console.log('开始播放');
      this.playLoading = false;
      this.synth.start();
    },
  },
};
</script> -->
